<template>
	<view class="container">
		<view class="header">
			<view class="search">
				<u-search placeholder="请输入产品" v-model="keyword" :showAction="false" bgColor="#f7f8fa"
					@search="onRefresh"></u-search>
			</view>
		</view>

		<scroll-view v-if="list.length > 0" class="list" :scroll-y="true" :scroll-top="top"
			:refresher-triggered="refresh" :refresher-enabled="true" @refresherrefresh="onRefresh"
			:lower-threshold="100" @scrolltolower="onBottom" @scroll="onScroll" :style="{ height: `${height}px` }">

			<navigator :url="`/pages/validate/info?code=${item.query_code}`"  hover-class="navigator-hover" v-for="item in list"
				:key="item.id">
				<view class="item">
					<view class="title">{{item.product.name}}</view>

					<view class="line"></view>

					<view class="son-list">
						<view class="son-item">
							<view class="name">查询次数：</view>
							<view class="value">{{item.query_num ? item.query_num : ''}}</view>
						</view>

						<view class="son-item">
							<view class="name">您查询的防伪码：</view>
							<view class="value">{{item.query_code}}</view>
						</view>

						<view class="son-item">
							<view class="name">首次查询时间：</view>
							<view class="value">{{item.query_time_text ? item.query_time_text : ''}}</view>
						</view>

						<view class="son-item">
							<view class="name">二维码：</view>
							<view class="value">
								<image src="/static/images/code.png" />
							</view>
						</view>
					</view>
				</view>
			</navigator>


			<!-- 加载更多-->
			<u-loadmore :status="status" marginBottom="40" fontSize="20" lineColor="#1CD29B" dashed line />

		</scroll-view>

		<!-- 返回顶部 -->
		<u-back-top :scroll-top="top" @click="BackTop"></u-back-top>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				refresh: false, // 下拉刷新状态
				finished: false, // 防止重复刷新
				list: [],
				page: 1,
				limit: 5,
				business: {},
				status: 'loadmore',
				keyword: '',
				top: 0,
				height: 0, //页面高度
			};
		},
		onShow() {
			//获取本地存储
			let business = uni.getStorageSync('business') ? uni.getStorageSync('business') : {};

			// 判断对象是否为空
			if (Object.getOwnPropertyNames(business).length > 0) {
				this.business = business;
				this.onRefresh();
			} else {
				//没有登录
				uni.reLaunch({
					url: '/pages/validate/validate'
				});
				return false;
			}
		},
		onReady() {
			//调用uni接口 获取页面的高度
			uni.getSystemInfo({
				success: (e) => {
					this.height = e.windowHeight;
				}
			})
		},
		methods: {
			onBottom() {
				this.ProductData()
			},
			BackTop() {
				this.top = 0;
			},
			onScroll(e) {
				this.top = e.detail.scrollTop
			},
			//下拉刷新
			onRefresh() {
				//防止重复下拉刷新
				if (this.finished) return;

				//执行一次下拉刷新
				this.finished = true;

				//判断是否处于下拉刷新中  true 表示下拉刷新已经被触发，false 表示下拉刷新未被触发
				if (!this.refresh) this.refresh = true

				this.page = 1;
				this.list = [];

				this.ProductData()
			},
			async ProductData() {
				let result = await this.$u.api.product({
					busid: this.business.id,
					page: this.page,
					limit: this.limit,
					keyword: this.keyword
				})

				if (this.finished) this.finished = false;
				if (this.refresh) this.refresh = false;
				this.status = 'loadmore'
				if (result.code == 0) {
					this.status = 'nomore'
					return false
				}
				this.list = this.list.concat(result.data)
				this.page++;
			}
		}
	};
</script>

<style>
	page {
		background-color: #eee;
	}

	.container {
		width: 95%;
		margin: 0 auto;
		padding-bottom: 20px;
	}

	.header {
		background-color: #fff;
		padding: 10px 0;
		margin-top: 10px;
		border-radius: 10px;
	}

	.header .search {
		width: 95%;
		margin: 0 auto;
	}

	.item {
		background: #fff;
		border-radius: 10px;
		overflow: hidden;
		margin-top: 10px;
		padding: 0 10px 10px;
	}

	.item .title {
		padding: 10px 0 10px 10px;
		font-size: 20px;
	}

	.item .line {
		width: 100%;
		height: 1px;
		background: #ebebeb;
		margin: 0 auto;
		margin-bottom: 10px;
	}

	.item .son-list .son-item {
		display: flex;
		justify-content: space-between;
		font-size: 14px;
		margin-bottom: 10px;
	}

	.item .son-list .son-item .name {
		color: #9b9b9a;
	}

	.item .son-list .son-item image {
		width: 30px;
		height: 30px;
	}
</style>